<style>
    .gallery-item {
        position: relative;
        display: inline-block;
    }

    .close-btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 0.8rem;
        height: 0.8rem;
        display: block;
    }
</style>
<div class="find-app" id="app">
    <!-- public-head -->
    <div class="header-mobile">
        <a class="nav-back" href="javascript:history.go(-1)">
            <img class="icon" src="__CDN__/assets/img/return@2x.png" alt="">
        </a>
        <h1 class="nav-title">找到了</h1>
    </div>
    <!-- main -->
    <div class="main-wrapper">
        <div class="find-out-wrapper">
            <div class="section-floor">
                <textarea maxlength="100" class="textarea" v-model="field.eurekaContent" placeholder="请输入你找到了的简单描述" name="" id=""
                    cols="30" rows="10"></textarea>
            </div>
            <div class="section-floor">
                <div class="upload-wrapper">
                    <p class="title">失物或失踪人照片上传</p>
                    <div class="gallery-bar">
                        <label v-if="field.eurekaimages.length<3" class="upload-control" for="upload">
                            <img class="img" src="__CDN__/assets/img/add@2x.png" alt="">
                            <input ref="anchorUpload" id="upload" type="file" accept="image/*" @change="uploadPicture">
                        </label>
                        <div v-for="(item,index) in field.eurekaimages"
                            :key="index" class="gallery-item">
                            <img class="img" :src="item" alt="">
                            <img @click="removeImages(index)" class="close-btn" src="__CDN__/assets/img/close.png"
                                alt="">
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" v-model="field.eurekaimages">
            <input type="hidden" v-model="field.id">
            <div class="section-floor">
                <div class="submit-wrapper">
                    <a class="submit-btn" @click="navChange()">提交</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__CDN__/assets/js/exif.js"></script>
<script src="__CDN__/assets/js/base64image.js"></script>
<script>
    let index = new Vue({
        el: '#app',
        data: {
            field: {
                eurekaimages: [],
                eurekaContent: "",
                id: '{$id}'
            }
        },
        created() {},
        mounted() {},
        methods: {
            removeImages(index) {
                this.field.eurekaimages.splice(index, 1);
            },
            navChange() {
                let self = this;
                axios({
                    method: "post",
                    url: "{:url('user/eureka')}",
                    data: self.field,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        this.$messagebox({
                            title: res.data.msg
                        }).then(res => {
                            if (res === 'confirm') {
                                // history.go(-1);
                                window.location.href =
                                    'http://xunwu.qiliaoapp.cn/index/user/participate.html'
                            }
                        })
                    } else {
                        alert(res.data.msg);
                    }
                })
            },
            uploadPicture() {
                let self = this
                base64Image({
                    width: 750,                             /*【选填】宽度默认750，如果图片尺寸大于该宽度，图片将被设置为该宽度*/
                    ratio: 0.75,                            /*【选填】压缩率默认0.75 */
                    file: self.$refs.anchorUpload,                               /*【必填】对应的上传元素 */
                    callback: function (imageUrl) {         /*【必填】处理成功后的回调函数 */
                        /*imageUrl为得到的图片base64数据，这里可以进行上传到服务器或者其他逻辑操作 */
                        self.axiosPictrue(imageUrl)
                    },
                });
            },
            axiosPictrue(base64String) {
                let self = this
                let formdata = new FormData()
                formdata.append('file', base64String)
                axios({
                    method: "post",
                    url: "/api/common/uploadBase64",
                    data: formdata,
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }).then(res => {
                    console.log(res)
                    if (res.data.code == 1) {
                        self.field.eurekaimages.push(res.data.data.url)
                    } else {
                        alert("上传失败");
                    }
                })
            }
        }
    })
</script>